<template>
    <div id="Con">
        <div class="one">
            <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
                <use xlink:href="#icon-zuojiantou"></use>
            </svg>
        </div>
        <div class="two">
            <div class="two_1">
                <img :src="$store.state.user.userDetail.profile.avatarUrl" alt="">
                <h3>{{$store.state.user.userDetail.profile.nickname}}</h3>
                <h5 v-if="$store.state.user.userDetail.profile.vipType==0">
                    你还未开通VIP会员
                </h5>
            </div>
        </div>
        <div class="there">
            <div>关于我们</div>
            <div>查看服务</div>
            <div class="there_1">退出登录</div>
        </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="less" scoped>
    #Con{
        width:7.5rem;
        .one{
            width: 100%;
            height: 50px;
            position: relative;
            padding-top: 10px;
            background: hotpink;
            border-bottom: 1px solid gray;
            .icon{
                width:40px;
                height: 30px;
            }
        }
        .two{
            width: 100%;
            height: 300px;
            text-align: center;
            background: hotpink;
            padding-top: 45px;
            .two_1{
                width: 80%;
                height: 200px;
                background: bisque;
                border-radius: 10px;
                margin: 0 auto;
                img{
                width: 70px;
                height: 70px;
                border-radius: 50%;
                margin-top: 20px;
                }
                h3{
                    margin-top: 20px;
                    font-size: 30px;
                }
                h5{
                    font-size: 15px;
                    color: red;
                    margin-top: 10px;
                }
            }
        }
        .there{
            width: 100%;
            height: 150px;
            div{
                width: 100%;
                text-align: center;
                height: 50px;
                font-size: 25px;
                font-weight: 900;
                border-top: 1px solid gray;
                line-height:50px;
            }
            .there_1{
                border-bottom: 1px solid gray;
            }
        }
    }

</style>
